<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div id="content"></div>
        <button onclick="fun()">点击</button>
    </div>
    <script>
        var data = {
            name: "张三",
            age: 15,
            tel: 110
        }

        // var $data = JSON.stringify(data)
        // $data = JSON.parse($data)


        // function beforeCreate() {
        //     var el = document.getElementById('content')
        //     el.innerHTML = data.name
        // }

        // beforeCreate()
        // Object.defineProperty(data, 'name', {
        //     set(value) {
        //         console.log(value)
        //         $data.name = value
        //         document.getElementById('content').innerHTML = value
        //     },

        //     get() {
        //         console.log(this)
        //         return $data.name
        //     }
        // })

        // function fun() {
        //     data.name = "李四"
        //     console.log(data.name)
        // }
        Object.defineProperty(data, 'name', {
            value: "王五",
            enumerable: true, // 定义对象是否可枚举 true表示对象可枚举
            writable: true, // 定义对象的属性是否可修改 true表示对象的属性可以修改
            configurable: false // 定义对象的属性是否可以删除
        })
        // console.log(data)
        // for(let key in data) {
        //     console.log(key)
        // }
        // data.name = "李四"
        // console.log(data)
        delete data['name']
        console.log(data)
    </script>
</body>
</html>